<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	#import {
		position: relative;
		top: 1.4px;
	}
</style>
<div class="page-header">
	<h1>
		菜品分类管理
        <a href="#modal-cate" class="btn btn-info a-custom" data-toggle="modal">
            <i class="ace-icon fa fa-plus"></i> 新增菜品分类
        </a>
	</h1>
</div>

<div class="col-xs-12">
	<!-- 筛选 -->
	<div class="widget-box">
		<div class="widget-header">
			<h4 class="widget-title">内容筛选</h4>
			<div class="widget-toolbar">
				<a href="#" data-action="collapse">
					<i class="ace-icon fa fa-chevron-up"></i>
				</a>
				<a href="#" data-action="close">
					<i class="ace-icon fa fa-times"></i>
				</a>
			</div>
		</div>
		<div class="widget-body">
			<div class="widget-main" style="padding-top:15px;">
				<div class="form-inline keyword-search-div">
					<label class="keyword-search-label">菜品分类名称</label>
					<div class="keyword-search-box">
						<div class="div-search">
							<input style="float:left;height:30px;width:180px;border:1px solid #669FC7;padding:0 30px 0 14px;border-radius:10px 0 0 10px !important;-moz-border-radius:10px 0 0 10px;" type="text" name="keyword" placeholder="搜索菜品分类名称..." autocomplete="off">
							<span id="empty-search" style="position:relative;right:110px;cursor:pointer;display:none;">×</span>
							<button id="btn-search" class="btn-search btn-info" style="outline:none;float:left;height:30px;width:44px;border:1px solid #669FC7;border:0;border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;margin-right:40px;">
								<i class="ace-icon fa fa-search nav-search-icon white"></i>
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<table id="dynamic-table" class="table table-striped table-bordered table-hover" style="margin-top:10px">
		<thead>
			<tr>
				<th>菜品分类名称</th>
				<th>创建时间</th>
				<?php if(! $rmxSchool['school_from'] || $rmxSchool['school_from'] == X_DATA_DIANXIN): ?>
					<th>操作</th>
				<?php endif ?>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>

<!-- 新增账号弹窗 -->
<div id="modal-cate" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button> <span id="school-name"></span>
					菜品分类管理
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10" id="cate-form">
							<input type="hidden" name="id" />
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">所属校区：</label>
								<div class="col-sm-6">
									<input class="form-control" type="text" disabled="" value="<?=$campusInfo['campus_name']?>" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">菜品分类名称：</label>
								<div class="col-sm-6">
									<input class="form-control" type="text" name="title" placeholder="请填写菜品分类名称"
										
									/>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="save-cate">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>

<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	$(function(){

		// 保存菜品分类按钮
		var cateForm = $("#cate-form");
		$("#save-cate").click(function(){
			cateForm.submit();
		})
		var submitUrl = "<?=admin_url('data/save_recipe_cate_action')?>";
		form_submit(cateForm, submitUrl, function(res) {
			tips_alert(res.msg, res.success, function(){
				if(res.success) window.location.reload();
			});
		})
		// 编辑菜品分类
		$("body").on("click", ".edit-cate", function(){
			cateForm.find("[name=id]").val($(this).data("id"))
			cateForm.find("[name=title]").val($(this).data("title"))
		})

		// 菜品分类表格
		var table = $('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('data/get_recipe_cate_list')?>',
			"columns": [
	            {"data": "title"},
	            {"data": "createtime"},
                {"data": function(ret){
                    var action = '';
                        action += '<a class="edit-cate green mr20" href="#modal-cate" data-toggle="modal" data-id="'+ ret.id +'" data-title="'+ ret.title + '"><i class="fa fa-edit"></i> 修改</a>';
                        action += '<a class="text-danger delete-cate" href="javascript:" data-id=' + ret.id +  ' data-title=' + ret.title + '><i class="fa fa-times"></i> 删除</a>';
                    return action;
                }}
			]
		});
		// 删除菜品分类
		$("body").on('click', '.delete-cate', function() {
			var id = $(this).data('id');
			var title = $(this).data('title');
			var posturl = "<?= admin_url("data/delete_recipe_cate_action") ?>";
			var data = {
				'id': id
			};
			layer.confirm('确定删除：' + title + '？', { title:"提示", offset: '160px' }, function(){
				ajax_post(posturl, data, function() {
					// 刷新页面
					window.location.reload();
				});
			});
		});

		// 内容筛选
		$("#data-search-btn").click(function(){
			table.setAjaxData({
				"keyword": $("[name=keyword]").val(),
			});
		});
		// 敲回车就搜索
		$("[name=keyword]").keypress(function (e) {
                if (e.which == 13) {
                    $("#btn-search").trigger("click");
                }
		});
		// 清空搜索框
		$("[name=keyword]").keyup(function() {
			if($(this).val().length > 0) {
				$("#empty-search").show();
				$("#empty-search").click(function(){
					$("[name=keyword]").val('');
					$(this).hide();
					// 重置搜索结果
					table.setAjaxData({
					});
				})
			} else {
				$("#empty-search").hide();
			}
		}); 
		// 搜索标题
		$("#btn-search").click(function() {
			var keyword = $("[name=keyword]").val();
			if(keyword != '') {
				table.setAjaxData({
					"keyword": keyword
				})
			}
		})
	})
</script>